<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <title>LogBird</title>
  <style>
    .logitem {
      word-wrap:break-word;
    }
  </style>
</head>

<body>

  <div class="container-fluid">
    <nav class="navbar navbar-light bg-secondary mb-2">
      <span class="navbar-brand text-white">
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-phone-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M3 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V2zm6 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
        </svg>
        Logging
      </span>
    </nav>
    <div class="row text-monospace">
      <div class="col-2">
        <div class="list-group text-nowrap" id="list-tab" role="tablist" 
        style=" overflow-y:auto; height:600px;">
        </div>
      </div>
      <div class="col-10">
        <div class="tab-content" id="nav-tabContent">
        </div>
      </div>
    </div>
  </div>


  <script src="/javascripts/socket.io.js"></script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
  <script>
    function getQueryVariable(variable) {
      let query = window.location.search.substring(1);
      let vars = query.split("&");
      for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return "android";
    }
    let userTag = getQueryVariable("tag");

    $(function () {
      let socket = io();
      socket.on(userTag, function (msg) {
        let nowDate = new Date();
        let timestamp = nowDate.getTime();
        
        let hourStr;
        let minuteStr;
        let secondStr;
        if (nowDate.getHours() < 10) {
          hourStr = "0" + nowDate.getHours();
        } else {
          hourStr = nowDate.getHours();
        }
        if (nowDate.getMinutes() < 10) {
          minuteStr = "0" + nowDate.getMinutes();
        } else {
          minuteStr = nowDate.getMinutes();
        }
        if (nowDate.getSeconds() < 10) {
          secondStr = "0" + nowDate.getSeconds();
        } else {
          secondStr = nowDate.getSeconds();
        }

        let content_div = '<div class="tab-pane fade" id="item-' + timestamp + '" role="tabpanel">';
        $('#nav-tabContent').append($(content_div));
        $('.tab-pane:last').append($('<p class="logitem">').html(msg));

        let title_div = '<a class="list-group-item list-group-item-action" id="list-' + timestamp + '" data-toggle="list" href="#item-' + timestamp + '" role="tab">';
        let title_str = "Log - " + 
            hourStr+ ":" + minuteStr + ":" + secondStr + "." + nowDate.getMilliseconds();
        $('#list-tab').append($(title_div));
        $('.list-group-item:last').append(title_str);
      });
    });
  </script>
</body>

</html>